<script setup>
import {onMounted, onUnmounted, reactive, ref} from 'vue';
import router from "@/router/index.js";
import axios from "axios";

// 定义一个响应式变量，用于控制显示的内容索引
const activeIndex = ref(0);

// 切换显示内容的函数
function showContent(index) {
  activeIndex.value = index;
}
function goBack() {
  router.go(-1); // 后退一步
}
const topic = reactive({
  getAll: [],
});
function getList() {
  axios.get("http://127.0.0.1:8081/topic/getList")
      .then((res) => {
        console.log(res.data); // 打印返回的数据
        topic.getAll = res.data;
      })
      .catch((err) => {
        console.error("请求失败:", err); // 打印错误信息
      });
}
onMounted(() => {
  getList();
  goodsAll();
});
const  goods= reactive({
  getAll:[]
})

const getAllInn=reactive({
  getAllIn:[]
})
function  getAllIn(){
  axios.get("http://127.0.0.1:8081/art/getAllIn")
      .then((res) => {
        getAllInn.getAllIn = res.data;
        for (let item of getAllInn.getAllIn) {
          console.log(item.id);
        }
        console.log(getAllInn.getAllIn)
      })
      .catch((err) => {
        console.log(err);
      });
}
onMounted(()=>{
  getAllIn()
})
function  goodsAll(){
  axios.get("http://127.0.0.1:8081/goods/getAll")
      .then((res) => {
        console.log(res.data); // 打印返回的数据
        goods.getAll = res.data;
      })
      .catch((err) => {
        console.error("请求失败:", err); // 打印错误信息
      });
}
const images = ref([
  'src/images/游戏图标/上古卷轴五.jpg',


  "src/images/游戏图标/严阵以待.jpg"
]);

// 当前显示的图片索引
const currentImageIndex = ref(0);

// 自动轮播函数
let interval;
function startCarousel() {
  interval = setInterval(() => {
    currentImageIndex.value = (currentImageIndex.value + 1) % images.value.length;
  }, 3000); // 每 3 秒切换一次
}

// 组件挂载时启动轮播
onMounted(() => {
  startCarousel();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(interval);
});

</script>

<template>
  <div class="db">
    <div class="mobile-home">
      <nav class="navbar navbar-expand-lg">
        <ul class="navbar-nav navbar">
          <li class="fanhui">
            <img src="../images/返回.png" height="32" width="32" @click="goBack"/></li>

          <div class="ssk">
            <img src="../images/搜索.png" height="32" width="32" />
            <p>双人成行</p>
          </div>
        </ul>
      </nav>
    </div>
    <div class="tp">
      <img :src="images[currentImageIndex]" alt="轮播图" />
    </div>
    <div class="healith">
      <div class="ls">
        <p>搜索历史</p>
        <img src="../images/删除.png" height="32" width="32" />
      </div>
      <div class="lishi">
        <p class="col-6">游戏标签1</p>
        <p class="col-6">游戏标签2</p>
        <p class="col-6">游戏标签3</p>
        <p class="col-6">游戏标签4</p>
      </div>
    </div>
    <div class="healith" >
      <div class="ls">
        <p>搜索发现</p>
        <div class="sx">
          <img src="../images/刷新.png" height="32" width="32" />
          <span>刷新</span>
        </div>
      </div>

        <div class="lishi" >
          <p class="col-6" v-for="item in topic.getAll" :key="item.id">{{ item.type }}</p>
      </div>


    </div>
    <div class="wei" >
      <ul class="bangdan">
        <li class="col-3" @click="showContent(0)">黑盒热榜</li>
        <li class="col-3" @click="showContent(1)">热门游戏</li>
        <li class="col-3" @click="showContent(2)">黑盒热议</li>
        <li class="col-3" @click="showContent(3)">小程序</li>
      </ul>
      <div >
        <div v-for="list in goods.getAll" :key="list.id">
          <div class="content" :class="{ active: activeIndex === 0 }">
            <div class="bd">
              <div class="tp2">

                <img :src="`${list.Avatar}`" width="60" height="60"/>
              </div>
              <p>{{list.name}}</p>
            </div>
          </div>
          <div class="content" :class="{ active: activeIndex === 1 }">
            <div class="bd">
              <div class="tp2">

                <img :src="`${list.Avatar}`" width="60" height="60"/>
              </div>
              <p>{{list.name}}</p>
            </div></div>
        </div>
        <div v-for="list2 in getAllInn.getAllIn" :key="list2.id">
          <div class="content" :class="{ active: activeIndex === 2 }">
            <div class="bd">
              <div class="tp2">

                <img :src="`${list2.picPath}`" width="60" height="60"/>
              </div>
              <p>{{list2.title}}</p>
            </div>

          </div>

        </div>
        <div class="content" :class="{ active: activeIndex === 3 }">
<div >
  <div class="bd2">
    <div class="tu">
      <img src="../images/推荐/pc游戏.jpg" height="210" width="210"/>
    </div>
    <p>PC游戏</p>
  </div>
  <div class="bd2">
    <div class="tu">
      <img src="../images/推荐/Steam.png" height="210" width="210"/>
    </div>
    <p>Steam游戏</p>
  </div>
  <div class="bd2">
    <div class="tu">
      <img src="../images/推荐/主机游戏.jpg" height="210" width="210"/>
    </div>
    <p>主机游戏</p>
  </div>
  <div class="bd2">
    <div class="tu">
      <img src="../images/推荐/手机游戏.jpg" height="210" width="210"/>
    </div>
    <p>手机游戏</p>
  </div>
  <div class="bd2">
    <div class="tu">
      <img src="../images/推荐/数码硬件.jpg" height="210" width="210"/>
    </div>
    <p>数码硬件</p>
  </div>
  <div class="bd2">
    <div class="tu">
   <img src="../images/推荐/盒友杂谈.jpg" height="210"width="210"/>
    </div>
    <p>盒友杂谈</p>
  </div>
</div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.fanhui{
  margin-top: 10px;
}
.bd2{
display: flex;
margin: 10px;
  align-items: center;
}
.tu{
  width: 50px;
  height: 50px;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures the image doesn't overflow */
  margin-right:10px;
}

.tu img {
  max-width: 100%;
  max-height: 100%;
}


.bd{
display: flex;
  align-items: center;
}
.tp2 {
  margin: 10px;
  width: 100px;
  height: 60px;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures the image doesn't overflow */
}
.tp2 img {
  max-width: 100%;
  max-height: 100%;

}
.content {
  display: none;
}
.content.active {
  display: block;
}
ul {
  list-style: none;
}
* {
  margin: 0;
  padding: 0;
}
.bangdan {
  display: flex;
}
.bangdan li {
  text-align: center;
}
.wei {
  margin-top: 50px;
}
.sx span {
  color: #dfdfdf;
}
.lishi {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
}
.lishi p {
  margin-top: 10px;
}
.healith {
  margin-top: 10px;
}
.ls {
  display: flex;
  justify-content: space-between;
  font-size: 32px;
}
.db {
  width: 100%;
  height: auto;
}
.tp {
  margin-top: 50px;
  width: 760px;
  height: 200px;
  overflow: hidden; /* 确保内容不会溢出 */
}
.tp img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使图片覆盖整个容器 */
}
.navbar {
  display: flex;
  justify-content: space-around;
  padding: 0 10px; /* 添加左右内边距 */
}
.ssk {
  background-color: #f3f4f6;
  width: 300px;
  height: 50px;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  padding: 0 10px; /* 内边距，可以根据需要调整 */
}
.ssk img {
  height: 32px;
  width: 32px;
  margin-right: 10px; /* 图片和文本之间的间距 */
}
.ssk p {
  margin: 0; /* 去掉默认的段落外边距 */
}
</style>